function move(x, y) {
    var directX = this.dataset.x * 1  //x方向
    var directY = this.dataset.y * 1  //y方向
    var speed = this.dataset.speed * 1 //移动速度，每次移动的像素
    var bodyW = document.body.clientWidth //页面宽度
    var bodyH = document.body.clientHeight //页面宽度
    var d = this.clientWidth //小球直径  div的宽度
    /**
     * clientWidth  获取元素的宽度
     * clientHeight 获取元素的高度
     */
    if (this.offsetLeft > (bodyW - d)) { //小球向右移出屏幕
        directX = -1
        this.dataset.x = directX
    }
    if (this.offsetLeft <= 0) { //小球移出屏幕左边
        directX = 1
        this.dataset.x = directX
    }
    if (this.offsetTop > (bodyH - d)) {
        directY = -1
        this.dataset.y = directY
    }
    if (this.offsetTop <= 0) {
        directY = 1
        this.dataset.y = directY
    }
    this.style.backgroundColor = 'hsl(' + Math.random() * 360 + ',50%,50%)' //red
    // hsl  设置颜色参数一 (0-360)  参数二,三 (百分比)
    this.style.left = this.offsetLeft + directX * speed + 'px'
    this.style.top = this.offsetTop + directY * speed + 'px'
    requestAnimationFrame(move.bind(this))  //循环调用move方法
}
function createBall() {
    var w = document.body.clientWidth  //获取body的宽度
    var h = document.body.clientHeight  //获取body的高度
    var d = (20 + Math.random() * 80)  //直径，即div.ball的width
    var width = d + 'px'
    var height = d + 'px'

    var color = 'hsl(' + Math.random() * 360 + ',50%,50%)'
    var left = Math.random() * (w - d) + 'px' //小球位置
    var top = Math.random() * (h - d) + 'px'  //小球位置
    var directX = Math.random() > 0.5 ? 1 : -1  //随机方向
    var directY = Math.random() > 0.5 ? 1 : -1
    var speed = Math.random() * 5 + 1  //随机速度
    var strHtml = `<div class="ball"
                   data-x="${directX}" 
                   data-y ="${directY}"
                   data-speed="${speed}"
                   style="width:${width};
                   height:${height};
                   background-color:${color};
                   left:${left};
                   top:${top}">
    </div>`
    document.body.innerHTML += strHtml
}
for (var i = 0; i < 20; i++) {
    createBall()
}
var balls = document.querySelectorAll('.ball') //获取所有的div.ball
balls.forEach(function (ball) {
    // 此处的ball变量表示当前循环到的div标签
    // move.bind(ball)// 改变move方法中的this指向ball标签
    move.call(ball)
})